<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html">
    <h:head>
        <link rel="stylesheet" type="text/css" href="Resources/main.css" />
    </h:head>

    <h:body class="ui-widget">
        
            <p:layout fullPage="true">

                <p:layoutUnit position="north" size="100px">
                    <h:form>
                        <p:menubar>
                            <f:facet name="options">
                                <p:graphicImage value="/Resources/hearts_logo.png" style="height: 30px; position: absolute;margin-left: -36px; left:50%;"/>
                                <h:outputLabel style="margin-right:10px" value="Benvenuto #{sessionUserBean.userInfo.username}" />
                                <p:commandButton type="submit" value="Logout" icon="ui-icon-extlink" action="#{authorizationBean.logout}"/> 
                            </f:facet>  
                        </p:menubar>  
                     </h:form>
                </p:layoutUnit>



                <p:layoutUnit position="west" size="400" styleClass="borderClass">
                    <h:form id="tableListForm" style="height:60%">
                        <p:dataTable value="#{mainRoomBean.gameTableList}" var="tableEntry"
                                     rowKey="#{tableEntry.name}"  
                            selection="#{tableManagerBean.selectedTable}" selectionMode="single"
                            id="tableList"         
                            emptyMessage="There are no game tables at the moment."
                            tableStyle="height:100%"
                            scrollable="true" scrollHeight="100%"
                            >
                            <f:facet name="header">
                                        Game Tables
                                    </f:facet>
                            <p:column>
                                <h:outputText value="#{tableEntry.name}" />
                            </p:column>
                            <p:column>
                                <h:outputText value="#{tableEntry.tableStatusString} (#{tableEntry.numPlayer}/#{4 - tableEntry.aiPlayer})" />
                            </p:column>
                            <f:facet name="footer">  
                                <p:commandButton id="newButton" value="NEW" icon="ui-icon-pencil" update=":createTableForm" oncomplete="newTable.show()"/>
                                <p:commandButton type="submit" id="joinButton" value="JOIN" icon="ui-icon-arrowreturnthick-1-e" action="#{tableManagerBean.joinTable}"/>  
                                <p:commandButton type="submit" id="watchButton" value="WATCH" icon="ui-icon-search" action="#{tableManagerBean.watchTable}"/>  
                            </f:facet> 
                        </p:dataTable>
                    </h:form>
                </p:layoutUnit>


                <p:layoutUnit position="center" size="100" styleClass="borderClass">
                    
                    <p:layout >

                        <p:layoutUnit position="east" size="200">
                            <p:dataTable id="userLogged" value="#{mainRoomBean.userList}" var="userEntry"

                                emptyMessage="**LISTA CONNESSI**">
                                 <f:facet name="header">
                                    Users
                                </f:facet>

                                <p:column>
                                    <h:outputText value="#{userEntry.username}" />
                                </p:column>
                                <p:column>
                                    <h:outputText value="#{userEntry.score}" />
                                </p:column>
                                <p:column>
                                    <h:outputText value="#{userEntry.status}" />
                                </p:column>
                            </p:dataTable>

                        </p:layoutUnit>

                        <h:form id="form">
                            <p:layoutUnit position="center" size="100">

                                <p:scrollPanel id="publicScroll" styleClass="ui-corner-all ui-widget-contentl chatscroll">
                                    <p:outputPanel id="public" layout="block"/>
                                </p:scrollPanel>

                            </p:layoutUnit>

                            <p:layoutUnit position="south">

                                    <p:inputText value="#{ChatBean.globalMessage}" styleClass="messageInput" />
                                    <p:spacer width="5" />
                                    <p:commandButton value="Send" styleClass="messageButton" actionListener="#{ChatBean.sendGlobal}" oncomplete="$('.messageInput').val('').focus()"/>

                            </p:layoutUnit>
                        </h:form>       
                    </p:layout>
                    

                </p:layoutUnit>

            </p:layout>
            
        <p:dialog id="dialog" header="New Game" widgetVar="newTable" resizable="false"
              width="250" showEffect="clip" hideEffect="fold">
            <h:form id="createTableForm">
                <h:panelGrid columns="2" cellpadding="4">

                    <f:facet name="header">

                    </f:facet>

                    <h:outputText value="Name:" />
                    <p:inputText id="createTableName" value="${tableManagerBean.name}" required="true"/>
                    <h:outputText value="AI Player:" />
                    <p:selectOneMenu value="${tableManagerBean.aiPlayer}">  
                        <f:selectItem itemLabel="0" itemValue="0" />  
                        <f:selectItem itemLabel="1" itemValue="1" />  
                        <f:selectItem itemLabel="2" itemValue="2" />  
                        <f:selectItem itemLabel="3" itemValue="3" />  
                    </p:selectOneMenu> 

                    <f:facet name="footer">
                        <p:commandButton type="submit" id="createButton" value="Create" update=":tableListForm:tableList" oncomplete="newTable.hide()" action="#{tableManagerBean.addAndJoinTable}" />
                    </f:facet>

                </h:panelGrid>
            </h:form>
        </p:dialog>
        
        
        

        
        
        <p:socket onMessage="handleMessage" channel="/chat"/>
        
        <p:socket channel="/refreshPage">
            <p:ajax event="message" update="userLogged, tableListForm:tableList" />
        </p:socket>

        <script type="text/javascript">
            function handleMessage(data) {
                var chatContent = $(PrimeFaces.escapeClientId('form:public'));
                var chatScroll = $(PrimeFaces.escapeClientId('form:publicScroll'));
                chatContent.append(data + '<br />');
                //keep scroll
                chatScroll.scrollTop(chatContent.height());
            }
        </script>
    </h:body>
    
    </f:view>
</html>          